<template>
	<view class="flex-col page">
		<view>
			<view :style="{height:statusBarHeight+44+'px'}"></view>
			<u-navbar @leftClick="$nav(2)" title="订单支付">
			</u-navbar>
		</view>
		
		<view class="order-info">
			<view style="font-size: 40rpx;color: #5c8edc;">¥{{payNumber}}</view>
			<view style="margin-top: 20rpx;">订单号：{{orderInfo.order_no}}</view>
		</view>
		
		
		<!-- <view class="pay-m" @click="goCoupon">
			<view>优惠券</view>
			<view class="flex-row">
				<view style="margin-right: 5rpx;">优惠¥{{onceCoupon.coupon_money ? onceCoupon.coupon_money : '0'}}</view>
				<u-icon name="more-dot-fill"></u-icon>
			</view>
		</view> -->
		
		<view class="flex-col" style="margin-top: 20rpx;" v-for="(item,index) in payMent" :key="index">
			
			<view class="pay-item" @click="checked_add(index)">
				<view class="flex-row items-center">
					<image :src="item.desc" style="width: 50rpx;height: 50rpx;"></image>
					<text style="margin-left: 20rpx;">{{item.name}}</text>
				</view>
				
				<view>
					<radio color='#5c8edc' :checked='item.checked' />
				</view>
			</view>
			
		</view>
		<view style="margin: 25rpx;color: #999;" v-if="isShowTips()">提示：当前{{beanNum}}数量不足，请先充值</view>
		
		<view class="bottom-lay">
			<view class="bottom-btn" @click="toPay()">
				{{btnText()}}
			</view>
		</view>
		
		<payKeyboard v-if="showKeyBoard"  @success="enterSuccess" @close="close"></payKeyboard>
	</view>
</template>

<script>
	import throttle from '../../uni_modules/uview-ui/libs/function/throttle';
	import payKeyboard from '@/components/mi-payKeyboard/mi-payKeyboard.vue'
	export default {
		data() {
			return {
				radio:'',
				pack: {},
				payMent:[
					
				],
				coupon:[],
				onceCoupon:{},
				orderInfo:{},
				payObject:{},
				payNumber:'',
				showKeyBoard: false,
				btnType:0,
				beanNum:'',
				userInfo:{},
			};
		},
		components: {
			payKeyboard
		},
		onLoad(op) {
			this.pack = JSON.parse(op.pack);
			this.getAllPrice();
			
			if(this.pack.goType == 1){ ///从商品详情进入支付
				this.createOrder();
			}else if(this.pack.goType == 2){ ///从订单进入支付
				this.payMent = this.pack.paymentMethod;
				this.coupon = this.pack.coupon;
				this.orderInfo.order_no = this.pack.order_no;
				this.orderInfo.order_id = this.pack.order_id;
				this.payMent.map((item) => {
					item.checked = false
				})
			}else{ ///从购物车进入
				this.createOrder();
			}
			
		},
		computed:{
			statusBarHeight(){
				return this.$store.state.statusBarHeight;
			}
		},
		onShow() {
			let that = this
			that.getCloudBean();
			uni.$once('selectCoupon',function(data){
				that.onceCoupon = data;
				
				///每次选择优惠券 总金额重新赋值
				// if(that.pack.free_shipping == 0){
				// 	that.payNumber = ((Number(that.pack.sell_price) * Number(that.pack.order_number)) + Number(that.pack.fixed_shipping_fee)).toFixed(2)
				// }else{
				// 	that.payNumber = Number(that.pack.sell_price) * Number(that.pack.order_number).toFixed(2)
				// }
				that.payNumber = ((Number(that.pack.sell_price) * Number(that.pack.order_number)) + Number(that.pack.fee)).toFixed(2)
				
				
				
				if(that.onceCoupon.coupon_type == 1){  ///满减券
					
					that.payNumber = (Number(that.payNumber) - Number(that.onceCoupon.coupon_money)).toFixed(2);
					
				}else{ ///折扣券
					
					let discount = Number(that.onceCoupon.coupon_discount) / 10
					
					that.payNumber = (Number(that.payNumber) * discount).toFixed(2);
					
				}
			})
		},
		methods:{
			btnText(){
				let flag = this.isShowTips();
				if(flag){
					if(this.payObject.value == 'assistPay'){ 
						this.btnType = 3;
						return '帮扶豆充值'
					}else if(this.payObject.value == 'cloudPay'){ 
						this.btnType = 1;
						return '云豆充值'
					}else if(this.payObject.value == 'birthPay'){
						this.btnType = 2;
						return '生日豆充值'
					}
				}else{
					this.btnType = 4;
					return '立即支付'
				}
			},
			isShowTips(){
				if(!this.payObject.value){
					return false;
				}
				if(this.payObject.value == 'assistPay'){ ///帮扶豆支付
					this.beanNum = '帮扶豆'
					if(Number(this.userInfo.assist_bean) >= Number(this.payNumber)){
						return false
					}else{
						return true
					}
				}else if(this.payObject.value == 'cloudPay'){ ///云豆支付
					this.beanNum = '云豆'
					if(Number(this.userInfo.cloud_bean) >= Number(this.payNumber)){
						return false
					}else{
						return true
					}
				}else if(this.payObject.value == 'birthPay'){///生日豆
					this.beanNum = '生日豆'
					if(Number(this.userInfo.birth_bean) >= Number(this.payNumber)){
						return false
					}else{
						return true
					}
				}
			},
			getCloudBean(){
				this.$request({
					url:'?c=User&a=info',
					type:'get',
				}).then(res =>{
					this.userInfo = res.data;
				})
			},
			getAllPrice(){
				
				this.payNumber = ((Number(this.pack.sell_price) * Number(this.pack.order_number)) + Number(this.pack.fee)).toFixed(2)
				
				// if(this.pack.free_shipping == 0){
				// 	this.payNumber = ((Number(this.pack.sell_price) * Number(this.pack.order_number)) + Number(this.pack.fixed_shipping_fee)).toFixed(2)
				// }else{
				// 	this.payNumber = Number(this.pack.sell_price) * Number(this.pack.order_number).toFixed(2)
				// }
			},
			
			
			goCoupon(){
				let c = JSON.stringify(this.coupon);
				uni.navigateTo({
					url:'/pages/order_allocation/coupon?list='+c
				});
			},
			
			enterSuccess(password){
				// console.log(password)
				this.$request({
					url:'?c=Pay&a=orderPay',
					type:'post',
					data:{
						order_id:this.orderInfo.order_id,
						// coupon_id:this.onceCoupon.id,
						payType:this.payObject.value,
						trade_password:password
					}
				}).then(res =>{
					console.log(res);
					if(this.payObject.value == 'wechatPay'){ ///微信支付
						console.log('微信支付')
						this.weixinpay(res.data)
					}else if(this.payObject.value == "cloudPay"){///云豆支付
						if(res.data == 'ok'){ ///云豆支付直接支付完成
							uni.redirectTo({
								url:'/pages/order_allocation/pay_success?goType=' + this.pack.goType
							})
						}else{  ///云豆支付不够 拉起微信支付
							this.weixinpay(res.data)
						}
					}else{ ///其他支付方式(生日豆/帮扶豆)
						if(res.data == 'ok'){
							uni.redirectTo({
								url:'/pages/order_allocation/pay_success?goType=' + this.pack.goType
							})
						}else{ ///余额不够拉起微信
							this.weixinpay(res.data)
						}
					}
				})
				this.showKeyBoard = false
			},
			// 点击[取消] 关闭输入框 的回调
			close() {
				this.showKeyBoard = false
			},
			toPay(){
				let that = this;
				throttle(function(){
					if(!that.payObject.value){
						that.$u.toast("请选择支付方式");
						return;
					}
					if(that.btnType == 1){  ///云豆
						let reNumber = Number(that.payNumber) - Number(that.userInfo.cloud_bean)
						that.goRecharge(1,reNumber);
					}else if(that.btnType == 2){ ///生日豆
						let reNumber = Number(that.payNumber) - Number(that.userInfo.birth_bean)
						that.goRecharge(2,reNumber);
					}else if(that.btnType == 3){///帮扶豆
						let reNumber = Number(that.payNumber) - Number(that.userInfo.assist_bean)
						that.goRecharge(3,reNumber);
					}else{
						if(that.payObject.value == 'wechatPay'){
							that.requestOrderPay();
						}else{
							uni.showModal({
								title:  '提示',
								content: '确认使用'+that.payObject.name+'？',
								cancelText: '取消',
								confirmText: '确定',
								confirmColor: '#007aff',
								success(res) {
									if (res.confirm) {
										// that.requestOrderPay();
										that.showKeyBoard = true
									}
								}
							})
						}
					}
					
				},1000);
			},
			goRecharge(t,number){
				uni.navigateTo({
					url: '/pages/wallet/recharge?type='+ t +'&number=' + number + '&tip=2',
				})
			},
			
			requestOrderPay(){
				this.$request({
					url:'?c=Pay&a=orderPay',
					type:'post',
					data:{
						order_id:this.orderInfo.order_id,
						// coupon_id:this.onceCoupon.id,
						payType:this.payObject.value,
					}
				}).then(res =>{
					console.log(res);
					if(this.payObject.value == 'wechatPay'){
						console.log('微信支付')
						this.weixinpay(res.data)
					}else if(this.payObject.value == "cloudPay"){///云豆支付
						if(res.data == 'ok'){
							// uni.showToast({
							// 	title:'支付成功'
							// });
							uni.redirectTo({
								url:'/pages/order_allocation/pay_success?goType=' + this.pack.goType
							})
						}else{
							this.weixinpay(res.data)
						}
					}else{
						if(res.data == 'ok'){
							uni.redirectTo({
								url:'/pages/order_allocation/pay_success?goType=' + this.pack.goType
							})
						}else{
							this.weixinpay(res.data)
						}
						
					}
				})
			},
			
			weixinpay(data){
				let that = this;
				uni.requestPayment({
				    provider: 'wxpay',
					timeStamp: data.timeStamp,
					nonceStr: data.nonceStr,
					package: data.package,
					signType: data.signType,
					paySign: data.paySign,
					success: function (res) {
						if (res.errMsg == "requestPayment:ok"){
							// uni.showToast({
							// 	title:'支付成功'
							// });
							uni.redirectTo({
								url:'/pages/order_allocation/pay_success?goType=' + that.pack.goType
							})
						 }else{
							console.log('支付失败')
							uni.showToast({
								title:'支付失败'
							});
						 }
						
					},
					fail: function (err) {
						console.log('fail:' + JSON.stringify(err));
					}
				});
			},
			
			///生成订单
			createOrder(){
				this.$request({
					url:'?c=Order&a=createOrder',
					type:'post',
					data:{
						sku_id:this.pack.sku_id,
						order_number:this.pack.order_number,
						address_id:this.pack.address_id,
						remark:this.pack.remark
					}
				}).then(res => {
					// console.log("1111:"+res)
					this.payMent = res.data.paymentMethod;
					this.coupon = res.data.coupon;
					this.orderInfo = res.data.orderInfo;
					
					this.payMent.map((item) => {
						item.checked = false
					})
				})
			},
			checked_add(val) {
				this.payMent.map((item, index) => {
					if (val == index) {
						this.payObject = item
						item.checked = true
					} else {
						item.checked = false
					}
				})
			},
		}
	}
</script>

<style lang="scss">
.page{
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	height: 100vh;
}
.order-info{
	background-color: #fff;
	height: 250rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 10rpx 50rpx;
}
.pay-item{
	background-color: #fff;
	padding: 30rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.bottom-lay{
	position: fixed;
	left: 0;
	bottom: 0;
	height: 150rpx;
	line-height: 90rpx;
	width: 100%;
	text-align: center;
	// background-color: #fff;
}
.bottom-btn{
	border-radius: 45rpx;
	background-color: #5c8edc;
	padding: 10rpx 40rpx;
	height: 78rpx;
	margin-right: 30rpx;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 20rpx 50rpx;
}
.pay-m{
		margin-top: 15rpx;
		background-color: #fff;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 25rpx;
		font-size: 28rpx;
	}
</style>
